<template>
  <div class="background back">
    <div class="title">
      <Icon type="md-cart"/>
      音乐市场
    </div>
    <div style="margin-top: 90px; width: 80%; margin-left: auto; margin-right: auto">
      <div>
        <Row style="display: flex; justify-items: right">
          <Col span="9" style="display: flex; margin-left: 65%">
            <label>
              <Input search enter-button placeholder="请输入作品名称..."/>
            </label>
            <Dropdown style="margin-left: 10px">
              <div style="height: 40px; line-height: 40px">
                筛选条件
                <Icon type="ios-arrow-down"></Icon>
              </div>
              <DropdownMenu slot="list">
                <DropdownItem></DropdownItem>
                <DropdownItem></DropdownItem>
                <DropdownItem></DropdownItem>
                <DropdownItem></DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </Col>
        </Row>
      </div>

      <div style="margin-top: 10px; position: relative;">
        <Row v-if="musics != null">
          <Col span="12">
            <card-for-transaction
              v-for="i in musics.slice(0, 5)"
              v-bind:key="i.musicId"
              :album-data="i"
              style="margin: 30px 20px;">
            </card-for-transaction>
          </Col>
          <Col span="12">
            <card-for-transaction
              v-for="i in musics.slice(5, 10)"
              v-bind:key="i.musicId"
              :album-data="i"
              style="margin: 30px 20px;">
            </card-for-transaction>
          </Col>
        </Row>
        <Spin v-if="spinShow" size="large" fix></Spin>
      </div>
    </div>
  </div>
</template>

<script>
import CardForTransaction from '@/components/CardForTransaction'

export default {
  name: 'Transaction',
  data () {
    return {
      musics: null,
      spinShow: true
    }
  },
  // inject: ['reload'],
  components: {
    CardForTransaction
  },
  created () {
    // console.log('created')
    this.$nextTick(() => {
      this.getData()
    })
  },
  methods: {
    getData () {
      // console.log('请求数据')
      const _this = this
      _this.$get('/musicPermission/getMarketOfMusic/1/10').then(res => {
        if (res.code === 20000) {
          _this.musics = res.data
          console.log('请求交易数据返回')
          console.log(res)
        } else {
          _this.$Notice.error({
            title: '获取交易数据失败',
            desc: res.message
          })
        }
        _this.spinShow = false
      }).catch(err => {
        console.log(err)
        _this.spinShow = false
      })
    }
  }
}
</script>

<style scoped>
.back {
  background-image: url('../assets/img/back4.jpg');
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
